<h2>Why is this an issue?</h2>
<p>Using <code>Function.prototype.bind</code> and arrows functions as attributes will negatively impact performance in React. Each time the parent is
rendered, the function will be re-created and trigger a render of the component causing excessive renders and more memory use. Wrapping the function
in a <code>useCallback</code> hook will avoid additional renders. This rule ignores <code>Refs</code>. This rule does not raise findings on DOM nodes
since that may require wrapping the DOM in a component. Still, better performance can be achieved if this rule is respected in DOM nodes too.</p>
<h3>Noncompliant code example</h3>
<pre>
&lt;Component onClick={this._handleClick.bind(this)}&gt;&lt;/Component&gt;

&lt;Component onClick={() =&gt; handleClick()}&gt;&lt;/Component&gt;
</pre>
<h3>Compliant solution</h3>
<pre>
function handleClick() {
    //...
}

&lt;Component onClick={handleClick}&gt;&lt;/Component&gt;
</pre>
<p>Situation can become more complicated when you need to pass additional parameters to the handler. Consider following component printing the list of
letters. Consider following non-compliant example</p>
<pre>
class Alphabet extends React.Component {
    handleClick(letter) {
        console.log(`clicked ${letter}`);
    }
    render() {
        return (&lt;div&gt;&lt;ul&gt;
            {letters.map(letter =&gt;
                &lt;li key={letter} onClick={() =&gt; this.handleClick(letter)}&gt;{letter}&lt;/li&gt;
            )}
        &lt;/ul&gt;&lt;/div&gt;)
    }
}
</pre>
<p>To avoid creating the arrow function you can factor out <code>li</code> element as separate child component and use <code>props</code> to pass the
<code>letter</code> and <code>onClick</code> handler.</p>
<pre>
class Alphabet extends React.Component {
    handleClick(letter) {
        console.log(`clicked ${letter}`);
    }
    render() {
        return (&lt;div&gt;&lt;ul&gt;
            {letters.map(letter =&gt;
                &lt;Letter key={letter} letter={letter} handleClick={this.handleClick}&gt;&lt;/Letter&gt;
            )}
        &lt;/ul&gt;&lt;/div&gt;)
    }
}

class Letter extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        this.props.handleClick(this.props.letter);
    }
    render() {
        return &lt;li onClick={this.handleClick}&gt; {this.props.letter} &lt;/li&gt;
    }
}
</pre>
<p>alternatively you could rewrite <code>Letter</code> as a function and use <code>useCallback</code></p>
<pre>
function Letter({ handleClick, letter }) {
    const onClick = React.useCallback(() =&gt; handleClick(letter), [letter])

    return &lt;li onClick={onClick}&gt;{letter}&lt;/li&gt;
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-react">eslint-plugin-react</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/jsx-no-bind.md">jsx-no-bind</a> </li>
  <li> <a href="https://reactjs.org/docs/faq-functions.html">Passing Functions to Components</a> - React documentation </li>
</ul>
